<template>
  <div class="history-container">
<!--    <div class="statistics">-->
<!--      <div>-->
<!--        <h3>已兑换余额</h3>-->
<!--        <p>{{ info.total_give_balance || 0 }}</p>-->
<!--      </div>-->
<!--      <div>-->
<!--        <h3>已兑出积分</h3>-->
<!--        <p>{{ info.total_face_add_point || 0 }}</p>-->
<!--      </div>-->
<!--      <div>-->
<!--        <h3>兑换手续费</h3>-->
<!--        <p>{{ info.total_handling_fee || 0 }}</p>-->
<!--      </div>-->
<!--    </div>-->
    <el-form ref="formRef" :model="params" inline>
      <el-form-item label="兑换人姓名" prop="real_name">
        <el-input v-model="params.real_name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="兑换人手机号" prop="mobile">
        <el-input v-model="params.mobile" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="兑换时间">
        <el-date-picker v-model="timer" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="datetimerange"
          range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" @change="timerChange">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="params.examine" clearable placeholder="请选择审核状态">
          <el-option label="全部" :value=null></el-option>
          <el-option label="未审核" :value=0></el-option>
          <el-option label="审核通过" :value=1></el-option>
          <el-option label="审核不通过" :value=2></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="getDataList()">查询</el-button>
        <el-button type="warning" @click="resetparams()">重置</el-button>
        <el-button type="primary" @click="exportDataList()">导出</el-button>
        <el-button type="primary" @click="exportDataList2()">导出(银行相关)</el-button>
      </el-form-item>
      <el-form-item label="审核状态" style="margin-left: 10em;">
        <el-select v-model="params.batchExamine" placeholder="请选择审核状态" @change="batchExamine_Changed">
          <el-option label="未审核" :value=0></el-option>
          <el-option label="审核通过" :value=1></el-option>
          <el-option label="审核不通过" :value=2></el-option>
        </el-select>
        <el-button type="warning" @click="batchExamine_click()">批量审核选中的记录</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" row-key="Id" border @sort-change="changeTableSort" @selection-change="checkbox_changed" stripe style="width: 100%">
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column type="index" align="center" width="80px" label="序号">
      </el-table-column>
      <el-table-column prop="real_name" align="center" label="兑换人" sortable="custom">
        <template slot-scope="scope">
          <div>{{ scope.row.real_name }}({{ scope.row.mobile }})</div>
        </template>
      </el-table-column>
      <el-table-column prop="bank_card" align="center" label="银行卡号">
      </el-table-column>
      <el-table-column prop="give_balance" align="center" label="兑换金额(元)">
      </el-table-column>
      <el-table-column prop="face_add_point" align="center" label="兑换获取积分">
      </el-table-column>
      <el-table-column prop="handling_fee" align="center" label="兑换手续费（元）">
      </el-table-column>
      <el-table-column prop="point_price" align="center" label="积分价格（元/积分）">
      </el-table-column>
      <el-table-column prop="create_time" align="center" label="兑换时间" sortable="custom">
      </el-table-column>
      <el-table-column prop="examine" align="center" label="审核状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.examine == 0" size="small" type="info">待审核</el-tag>
          <el-tag v-if="scope.row.examine == 1" size="small" type="success">审核通过</el-tag>
          <el-tag v-if="scope.row.examine == 2" size="small" type="danger">审核拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button  :disabled = "scope.row.examine == 1 || scope.row.examine == 2"
                      type="text" size="small" @click="chainAudit(scope.row)"
          >审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="'审核'" :close-on-click-modal="false" :visible.sync="chainAuditOpen" :before-close="handleClose">
      <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
        <el-form-item label="兑换人" prop="real_name" >
          <el-input v-model="this.dataForm.real_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile" >
          <el-input v-model="this.dataForm.mobile" disabled></el-input>
        </el-form-item>
        <el-form-item label="兑换获得积分" prop="give_balance" >
          <el-input v-model="this.dataForm.give_balance" disabled></el-input>
        </el-form-item>
        <el-form-item label="手续费用" prop="handling_fee" >
          <el-input v-model="this.dataForm.handling_fee" disabled></el-input>
        </el-form-item>
        <el-form-item label="实际兑换余额" prop="face_balance" >
          <el-input v-model="this.dataForm.face_balance" disabled></el-input>
        </el-form-item>
        <el-form-item label="实际兑换积分" prop="face_add_point" >
          <el-input v-model="this.dataForm.face_add_point" disabled></el-input>
        </el-form-item>
        <el-form-item label="申请时间" prop="create_time" >
          <el-input v-model="this.dataForm.create_time" disabled></el-input>
        </el-form-item>
        <el-form-item label="积分价格" prop="point_price" >
          <el-input v-model="this.dataForm.point_price" disabled></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="examine">
          <el-select v-model="this.dataForm.examine" placeholder="请选择审核状态" @change="handleExamineChange">
            <el-option label="未审核" :value=0></el-option>
            <el-option label="审核通过" :value=1></el-option>
            <el-option label="审核不通过" :value=2></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chainAuditOpen = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="params.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params.limit"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
import seviceApi from '@/api/pointToBalanceCNHD'
import { isMobile } from '@/utils/validate'
import Vue from 'vue'
export default {
  data () {
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      timer: null,
      info: {},
      params: {
        page: 1,
        limit: 10,
        real_name: null,
        mobile: null,
        start_time: null,
        end_time: null,
        sort_field: '',
        sort_type: 'ASC',
        examine: null,
        batchExamine: null
      },
      tableData: [],
      checkBoxData: [],
      totalPage: 0,
      dialogVisible: false,
      chainAuditOpen: false,
      pointForm: {},
      pointFormRules: {
        mobile: [
          {
            required: true,
            message: '转赠接收人手机号不能为空',
            trigger: 'blur'
          },
          {
            validator: validateMobile,
            trigger: 'blur'
          }
        ],
        // give_name: [
        //   { required: true, message: '转赠人姓名不能为空', trigger: 'blur' }
        // ],
        give_point: [
          { required: true, message: '转赠积分数不能为空', trigger: 'blur' }
        ]
      },
      dataForm: {}
    }
  },
  created () {
    this.getList()
    // this.getInfo()
  },
  methods: {
    checkbox_changed (val) {
      console.clear()
      console.log(val)
      this.checkBoxData = val
    },
    batchExamine_Changed (value) {
      this.params.batchExamine = value
    },
    handleExamineChange (value) {
      console.log('审核状态已改变:', value)
      // 在这里可以处理值改变后的逻辑
      this.dataForm.examine = value
    },
    changeTableSort (e) {
      debugger
      if (e.order == 'descending') {
        this.params.sort_type = 'DESC'
      } else if (e.order == 'ascending') {
        this.params.sort_type = 'ASC'
      }
      this.params.sort_field = e.prop
      this.getDataList()
    },
    getList () {
      seviceApi.list(this.params).then(res => {
        if (res && res.data.code === 200) {
          this.tableData = res.data.list.list
          this.totalPage = res.data.list.totalCount
        }
      })
    },
    // 导出数据
    exportList () {
      this.$confirm(`确定进行导出操作吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let token = Vue.cookie.get('token')
          let real_name = this.params.real_name == null ? '' : this.params.real_name
          let mobile = this.params.mobile == null ? '' : this.params.mobile
          let start_time = this.params.start_time == null ? '' : this.params.start_time
          let end_time = this.params.end_time == null ? '' : this.params.end_time
          let sort_field = this.params.sort_field == null ? '' : this.params.sort_field
          let sort_type = this.params.sort_type == null ? '' : this.params.sort_type
          let examine = this.params.examine == null ? '' : this.params.examine
          window.location.href = `${this.$config.SERVER_URL}/api/pointtobalace/pointtobalacecnhd/export?mobile=${mobile}&real_name=${real_name}&start_time=${start_time}&end_time=${end_time}&sort_field=${sort_field}&sort_type=${sort_type}&examine=${examine}&token=${token}`
        })
        .catch(() => { })
    },
    // 导出数据
    exportList2 () {
      this.$confirm(`确定进行导出操作吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let token = Vue.cookie.get('token')
          let real_name = this.params.real_name == null ? '' : this.params.real_name
          let mobile = this.params.mobile == null ? '' : this.params.mobile
          let start_time = this.params.start_time == null ? '' : this.params.start_time
          let end_time = this.params.end_time == null ? '' : this.params.end_time
          let sort_field = this.params.sort_field == null ? '' : this.params.sort_field
          let sort_type = this.params.sort_type == null ? '' : this.params.sort_type
          let examine = this.params.examine == null ? '' : this.params.examine
          window.location.href = `${this.$config.SERVER_URL}/api/pointtobalace/pointtobalacecnhd/export2?mobile=${mobile}&real_name=${real_name}&start_time=${start_time}&end_time=${end_time}&sort_field=${sort_field}&sort_type=${sort_type}&examine=${examine}&token=${token}`
        })
        .catch(() => { })
    },
    chainAudit (row) {
      this.chainAuditOpen = true
      this.dataForm = JSON.parse(JSON.stringify(row))
      console.log(this.dataForm)
      // this.dataForm.examine = 1
    },
    // getInfo () {
    //   seviceApi.getInfo().then(res => {
    //     if (res && res.data.code === 200) {
    //       this.info = res.data.data
    //     }
    //   })
    // },
    timerChange (e) {
      if (e) {
        this.params.start_time = e[0]
        this.params.end_time = e[1]
      } else {
        this.params.start_time = null
        this.params.end_time = null
      }
    },
    // 每页数
    sizeChangeHandle (val) {
      this.params.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.params.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.params.page = 1
      this.getList()
    },
    resetparams () {
      this.params.sort_field = ''
      this.params.sort_type = 'ASC'
      this.timer = null
      this.params.start_time = null
      this.params.end_time = null
      this.examine = null
      this.$refs.formRef.resetFields()
      this.getDataList()
    },
    // 导出到Excel
    exportDataList () {
      this.params.page = 1
      this.exportList()
    },
    // 导出到Excel
    exportDataList2 () {
      this.params.page = 1
      this.exportList2()
    },
    handleClose () {
      this.dataForm = {}
      this.$refs.dataForm.resetFields()
    },
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          seviceApi.editData(this.dataForm).then(res => {
            const data = res.data
            if (data && data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.chainAuditOpen = false
                }
              })
              this.getDataList()
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    batchExamine_click () {
      if (this.checkBoxData && this.checkBoxData.length > 0) {
        if (!this.params.batchExamine) {
          this.$message({
            message: '请选择审核状态',
            type: 'info',
            duration: 1500
          })
          return
        }

        let batchParams = {
          balanceToPointRecordCNHDs: this.checkBoxData,
          examine: this.params.batchExamine
        }
        seviceApi.batchToEditData(batchParams).then(res => {
          const data = res.data
          if (data && data.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.chainAuditOpen = false
              }
            })
            this.getDataList()
          } else {
            this.$message.error(data.msg)
          }
        })
      } else {
        this.$message({
          message: '请至少选择一个记录',
          type: 'info',
          duration: 1500
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.history-container {
  .statistics {
    display: flex;
    margin-bottom: 20px;

    & > div {
      margin-right: 200px;

      &:last-child {
        margin-right: 0;
      }

      p {
        text-align: center;
      }
    }

    .give {
      display: flex;
      align-items: center;

      .give-btn {
        height: 40px;
        margin-left: 20px;
      }
    }
  }
  /deep/ .el-dialog {
    .el-form {
      color: red;
      .el-form-item {
        width: 100%;
        display: flex;
      }
      .el-form-item__content {
        flex: 1;
        .el-input-number--medium {
          width: 100%;
          // .el-input--medium {
          //   .el-input__inner {
          //     text-align: left !important;
          //   }
          // }
        }
      }
    }
  }
}
</style>
